<template>
	<view class="component" v-show="showCom && cartCount > 0">
		<view class="sub-mask" :class="{'f-show': showItems}" @click="onCloseItems()" v-show="showItems"></view>
		<view class="sub-block">
			<view class="b-items" v-show="showItems">
				<view class="b-column">
					<view class="s-num">共{{cartCount}}个套餐</view>
					<view class="s-action" @click="onClear">
						<image src="@/static/imgs/cart-empty.png" mode="scaleToFill"></image>
						<view class="s-tit">清空</view>
					</view>
				</view>
				<scroll-view class="b-goods-list" scroll-y>
					<view class="b-goods" v-for="(item, index) in cartList" :key="index">
						<view class="b-cover">
							<image :src="item.goods_cover" mode="aspectFill"></image>
						</view>
						<view class="b-main">
							<text class="b-title">{{item.goods_name}}</text>
							<view class="b-info">
								<view class="s-spec">{{item.goods_names}}</view>
							</view>
							<view class="b-amount">
								<view class="s-price">¥{{goodsPrice(item)}}</view>
								<view class="b-counter">
                      <view class="del" @click="onCounter(index, 'dec')">删除</view>
<!--									<view class="iconfont icon-minus1" @click="onCounter(index, 'dec')"></view>-->
<!--									<view class="s-num">{{item.goods_count}}</view>-->
<!--									<view class="iconfont icon-plus1" @click="onCounter(index, 'inc')"></view>-->
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="b-summary">
				<view class="b-info" @click.stop="onShowItems">
					<view class="b-count">
						<!-- <view class="s-icon"></view> -->
						<image src="@/static/imgs/cart-icon.png" mode="scaleToFill"></image>
						<!-- <view class="iconfont icon-user-cart"></view> -->
						<view class="s-num">{{cartCount}}</view>
					</view>
					<view class="b-price">¥{{totalPrice}}</view>
				</view>
				<view class="b-action" @click.stop="onPreview">
					<view class="s-submit">去结算</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		handleCart,
		emptyCart
	} from '@/service/api/order.js'
	import Util from '@/common/util'
	export default {
		name: 'quick-cart',
		props: {},
		data() {
			return {
				showCom: true,
				showItems: false
			}
		},
		computed: {
			cartList() {
				return this.$store.getters.cartList || []
			},
			goodsPrice() {
				return (item) => {
					return (parseFloat(item.goods_price) * parseInt(item.goods_count)).toFixed(2)
				}
			},
			cartCount() {
				let cartCount = 0
				for (var i = 0; i < this.cartList.length; i++) {
					const item = this.cartList[i]
					cartCount += parseInt(item.goods_count)
				}
				return cartCount
			},
			totalPrice() {
				let totalPrice = 0
				for (var i = 0; i < this.cartList.length; i++) {
					const item = this.cartList[i]
					totalPrice += parseFloat(item.goods_price) * parseInt(item.goods_count)
				}
				return totalPrice.toFixed(2)
			},
		},
		methods: {
			show() {
				this.showCom = true
			},
			close() {
				this.showCom = false
			},
			onCloseItems() {
				this.showItems = false
			},
			onShowItems() {
				this.showItems = !this.showItems
			},
			onClear() {
				this.$store.commit('clearCartList')
				this.showItems = false
				emptyCart().then(([err, res]) => {
					console.log('emptyCart', err, res)
				})
			},
			onCounter(index, type) {
				const cartItem = this.cartList[index]
				if (type === 'dec' && cartItem.goods_count <= 0) {
					return
				}
				handleCart(cartItem.id, type === 'inc' ? 'increase' : 'decrease').then(([err, res]) => {
					console.log('handleCart', err, res)
					if (!err) {
						this.$store.commit('cartItemCounter', {
							index,
							type
						})
						if (this.cartCount === 0) {
							this.showItems = false
						}
					}
				})
			},
			onPreview() {
				console.log('onPreview')
				const cartList = this.$store.getters.cartList
				let goodsData = []
				for (let i = 0; i < cartList.length; i++) {
					let cartItem = cartList[i]
					goodsData.push({
						cart_id: cartItem.id,
						goods_id: cartItem.goods_id,
						goods_name: cartItem.goods_name,
						goods_price: cartItem.goods_price,
						goods_data: cartItem.goods_data,
						goods_count: cartItem.goods_count
					})
				}
				uni.navigateTo({
					url: '/pages/order/preview?goods_data=' + JSON.stringify(goodsData)
				})
			}
		}
	};
</script>

<style lang="scss">
	.sub-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		&.f-show {
			background: rgba($color: #000000, $alpha: 0.6);
		}
	}

	.sub-block {
		position: fixed;
		left: 0upx;
		// #ifdef MP-WEIXIN
		bottom: 0;
		// #endif
		// #ifdef H5
		bottom: 100upx;
		// #endif
		z-index: 100;
		width: 750upx;

		image {
			width: 100%;
		}
	}

	.b-items {
		padding-bottom: 160upx;
		width: 750upx;
		background: #fff;
		border-radius: 20upx 20upx 0 0;

		.b-column {
			padding: 0 20upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80upx;
			background: $pq-bg-color-minor;
			border-radius: 20upx 20upx 0 0;

			.s-num {
				color: $pq-main-color;
				font-weight: bold;
				font-size: 28upx;
			}

			.s-action {
				color: $pq-minor-color;
				font-size: 28upx;
				display: flex;
				align-items: center;

				image {
					margin-right: 10upx;
					width: 25upx;
					height: 25upx;
				}
			}
		}

		.b-goods-list {
			max-height: 600upx;
			padding-top: 30upx;
		}

		.b-goods {
			margin-bottom: 30upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			// border-bottom: 1upx solid #eee;

			.b-cover {
				width: 140upx;
				height: 140upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20upx;
				}
			}

			.b-main {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20upx;

				.b-title {
					font-size: 28upx;
					color: $pq-main-color;
				}


				.b-info {
					margin-top: 10upx;
					display: flex;
					align-items: center;

					.s-spec {
						margin-right: 20upx;
						font-size: 24upx;
						color: $pq-minor-color;
					}

					.s-attrs {
						margin-right: 20upx;
						display: flex;
						align-items: center;

						.s-item {
							margin-right: 10upx;
							font-size: 24upx;
							color: $pq-minor-color;
						}
					}

					.s-notes {
						display: flex;
						align-items: center;

						.s-item {
							margin-right: 10upx;
							font-size: 24upx;
							color: $pq-minor-color;
						}
					}
				}

				.b-amount {
					margin-top: 10upx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.s-price {
						font-size: 36upx;
						color: #FF9626;
						font-weight: bold;
					}

					.b-counter {
						display: flex;
						align-items: center;

						.iconfont {
							font-size: 44upx;
							color: #FF9626;
						}

						.s-num {
							width: 50upx;
							text-align: center;
							font-size: 30upx;
							color: $pq-main-color;
						}
            .del{
              background: red;
              color: wheat;
              width: 100upx;
              text-align: center;
              height: 48upx;
              border-radius: 24upx;
              font-size: 24upx;
              line-height: 48upx;
            }
					}
				}

			}
		}
	}

	.b-summary {
		position: absolute;
		left: 30upx;
		bottom: 20upx;
		width: 690upx;
		height: 110upx;
		background: #fff;
		box-shadow: 0 4upx 15upx 0 rgba(0, 0, 0, 0.1);
		border-radius: 55upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.b-info {
			padding: 0 20upx;
			display: flex;
			align-items: center;

			.b-count {
				position: relative;

				.iconfont {
					font-size: 50upx;
					width: 60upx;
					height: 60upx;
					color: #666;
				}

				image {
					width: 74upx;
					height: 74upx;
				}

				.s-num {
					position: absolute;
					right: -20upx;
					top: -30upx;
					font-size: 24upx;
					background: #FF9626;
					color: #fff;
					width: 40upx;
					height: 40upx;
					line-height: 40upx;
					text-align: center;
					border-radius: 20upx;
				}
			}

			.b-price {
				margin-left: 30upx;
				font-size: 32upx;
				font-weight: bold;
				color: #FF9626;
			}
		}

		.b-action {
			display: flex;
			align-items: center;

			.s-submit {
				padding: 0 60upx;
				height: 110upx;
				line-height: 110upx;
				font-size: 36upx;
				color: #fff;
				background: $pq-active-color;
				border-radius: 0 55upx 55upx 0;
			}
		}
	}
</style>